<template>
  <div>
    <el-row class="mb-4">
      <el-button type="primary" @click="showDialog">新增学生</el-button>
      <el-button type="primary" @click="down">下载模版</el-button>

<div class="mybox">
    <el-button type="primary" class="mybtn">导入数据</el-button>
    <input class="input" type="file" accept=".xlsx" @change="getData" />
</div>
     
    </el-row>
    <el-dialog v-model="dialogVisible" title="新增学生" width="30%">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table :data="list.list" style="width: 100%">
      <el-table-column fixed prop="_id" label="编号" />
      <el-table-column prop="username" label="姓名" />
      <el-table-column prop="userpwd" label="密码" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { userAdd, studentList, userAddMany } from '../service/userService'
import { importsExcel } from '@/utils/excel.js'
import type UserInterface from '@/model/interface/userInterface';
const dialogVisible = ref<boolean>(false) //弹框控制状态
let list = ref<{
  list:Array<UserInterface>
}>({
  list: []
})

let showDialog = () => {
  dialogVisible.value = true;
}

let down = () => {
  let url = '/api/file/下载模块.xlsx'
  let a = document.createElement('a')
  a.href = url
  a.click()
  a.remove()
}

let getData = async () => {
  let res = await importsExcel(window.event)
  let res2 = await userAddMany({ list: res })
    if(res2.data.code ==200){
        list.value.list.push(...res2.data.data);
    }else{
        alert(res2.data.msg);
    }
}
const ruleFormRef = ref() //表单元素

const ruleForm = reactive<{
  username:string,
}>({
  //表单内容
  username: ''
})
const rules = reactive({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
})

onMounted(async () => {
  let res = await studentList({})

  if (res.data.code == 200) {
    list.value.list = res.data.data
    console.log(res)
  } else {
    alert(res.data.msg)
  }
})

const submitForm = (formEl: any) => {
  if (!formEl) return
  formEl.validate(async (valid: boolean) => {
    if (valid) {
      console.log('submit!')
      console.log(ruleForm)

      let res = await userAdd({
        username: ruleForm.username,
        userpwd: '123456',
        type: 2
      })

      if (res.data.code == 200) {
        resetForm(ruleFormRef.value)
        alert(res.data.msg)
      } else {
        alert(res.data.msg)
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: any) => {
  //重置
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}
</script>

<style scoped>
.mybox{
    position: relative;
}
.mybtn{
    position: absolute;
    left:0;
    top:0;
    width: 100px;
}
.input{
    position: absolute;
    left:0;
    top:0;
    z-index: 9999;
    opacity: 0;
}

</style>
